<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: Microsoft YaHei, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
            font-size: 12px;
        }
        body>div{
            width: 1220px;
            height: 223px;
            background-color: #62b5ec;
        }
        ul{
            width: 1220px;
            list-style-type: none;/*去掉图标*/
            padding:0; /*去掉自带的40px内边距*/
        }
        li{
            width: 224px;  /*1220/5 244*/
            height: 223px;
            margin: 0 10px;/*添加间距*/
            float: left;
            border-radius: 5px;
            overflow: hidden;/*让超出圆角的部分隐藏，为了能看到圆角效果*/
            background-color: white;
        }
        li>div{
            width: 224px; /*为了给每个li之间添加间距*/

        }
        .t_div>a>img{
            width: 100%;/*上级div有多宽 图片就多宽*/
        }
        .b_div{
            padding: 15px;
        }
        h4>a{
            text-decoration: none;
            font-size: 14px;
            color: black;
            font-weight: normal;
        }
        .s1{
            color: #4f8dfe;
        }
        .s2{
            color: #888;
            float: right;
        }
        .b_div>div{
            width: 194px;
        }


    </style>
</head>
<body>
<div>
    <ul>
        <li>
            <div class="t_div">
                <a href="">
                    <img src="https://cdn.tmooc.cn/bsfile//courseImg///d4167e5378ba4ae9873ab291ba4fdf55.jpg" alt="">
                </a>
            </div>
            <div class="b_div">
                <h4>
                    <a href="">职达【阿里】-技术岗面试攻略</a>
                </h4>
                <div>
                    <span class="s1">免费</span>
                    <span class="s2">3,115人报名</span>
                </div>
            </div>
        </li>
        <li>
            <div class="t_div">
                <a href="">
                    <img src="https://cdn.tmooc.cn/bsfile//courseImg///6f1825093e0f48f0a26e98b307b948e6.jpg" alt="">
                </a>
            </div>
            <div class="b_div">
                <h4>
                    <a href="">职达【阿里】-技术岗面试攻略</a>
                </h4>
                <div>
                    <span class="s1">免费</span>
                    <span class="s2">3,115人报名</span>
                </div>
            </div>
        </li>
        <li>
            <div class="t_div">
                <a href="">
                    <img src="https://cdn.tmooc.cn/bsfile//imgad///8D4204DFC45C40BCBF68150E442E1D18.png" alt="">
                </a>
            </div>
            <div class="b_div">
                <h4>
                    <a href="">职达【阿里】-技术岗面试攻略</a>
                </h4>
                <div>
                    <span class="s1">免费</span>
                    <span class="s2">3,115人报名</span>
                </div>
            </div>
        </li>
        <li>
            <div class="t_div">
                <a href="">
                    <img src="https://cdn.tmooc.cn/bsfile//courseImg///280c6025caa14649ba86b3561db92066.jpg" alt="">
                </a>
            </div>
            <div class="b_div">
                <h4>
                    <a href="">职达【阿里】-技术岗面试攻略</a>
                </h4>
                <div>
                    <span class="s1">免费</span>
                    <span class="s2">3,115人报名</span>
                </div>
            </div>
        </li>
        <li>
            <div class="t_div">
                <a href="">
                    <img src="https://cdn.tmooc.cn/bsfile//courseImg///1b430a2b47c448c9ad27d8da91b30891.jpg" alt="">
                </a>
            </div>
            <div class="b_div">
                <h4>
                    <a href="">职达【阿里】-技术岗面试攻略</a>
                </h4>
                <div>
                    <span class="s1">免费</span>
                    <span class="s2">3,115人报名</span>
                </div>
            </div>
        </li>
    </ul>
</div>
</body>
</html>